<template>
  <el-dialog title="import sku" width="30%" class="importDialog" :visible.sync="visible" :show="show"
    @close="$emit('update:show', false)">
    <el-upload ref="xlsUpload" class="" action="#" :http-request="uploadHandle" :auto-upload="false">
      <el-button slot="trigger" size="small" type="primary">Select file</el-button>
      <el-button style="margin-left: 10px" size="small" type="success" @click="submitUpload">Upload to
        server</el-button>
      <div slot="tip" class="el-upload__tip">Only xlsx files can be uploaded</div>
    </el-upload>
    <span slot="footer" class="dialog-footer">
      <el-button @click="visible = false">cancel</el-button>
      <el-button type="primary" @click="visible = false">Submit</el-button>
    </span>
  </el-dialog>
</template>

<script>
  export default {
    name: "UploadXls",
    props: {
      show: {
        type: Boolean,
        default: false,
      },
      module: {
        type: String,
        default: "",
      },
      id: {
        type: String,
        default: "",
      },
    },
    data() {
      return {
        cid: this.id,
        visible: this.show,
        fileReader: new FileReader(),
      };
    },
    watch: {
      show() {
        this.visible = this.show;
      },
    },
    methods: {
      async uploadHandle(options) {
        const file = options.file;
        if (file) {
          this.fileReader.readAsDataURL(file);
        }
        this.fileReader.onload = () => {
          const formData = new FormData();
          formData.append("file", file);
          formData.append("customer_id", this.cid);
          const {
            upload
          } = require(`@/api/${this.module}`);
          upload(formData)
            .then((res) => {
              const {
                info
              } = res;
              console.log(res, "12121212")
              this.$message.success(info);
              this.$parent.fetchData();
              this.visible = false;
            })
            .catch((err) => {
              console.log(err, "3333333")
              if (err.response.status === 422) {
                const {
                  info,
                  fileName
                } = err.response.data;
                this.$message.error(info);
                //window.location.href = `${fileName}`;
              }
            });
        };
      },
      submitUpload() {
        this.$refs["xlsUpload"].submit();
      },
      // 下载模板
      async downloadTemplate() {
        const {
          download
        } = require(`@/api/${this.module}`);
        const res = await download();
        this.exportFile("template.xlsx", res);
      },
      exportFile(fileName, res) {
        const content = res;
        const blob = new Blob([content], {
          type: "application/vnd.ms-excel;charset=utf-8",
        });
        if ("download" in document.createElement("a")) {
          // 非IE下载
          const elink = document.createElement("a");
          elink.download = fileName;
          elink.style.display = "none";
          elink.href = window.URL.createObjectURL(blob);
          document.body.appendChild(elink);
          elink.click();
          window.URL.revokeObjectURL(elink.href); // 释放 URL对象
          document.body.removeChild(elink);
        } else {
          // IE10+下载
          window.navigator.msSaveBlob(blob, fileName);
        }
      },
    },
  };
</script>

<style>
  .importDialog>>>.el-dialog__body {
    padding-top: 5px;
  }
</style>